<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "needLogin": "true",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的"
  }
}
</route>

<script lang="ts" setup>
import type { mineTS } from '@/api/mine/mine'
import { ref } from 'vue'
import { useMessage } from 'wot-design-uni'
import { getMine } from '@/api/mine/mine'

const message = useMessage()

const mineData = ref<mineTS>({
  code: 0,
  message: '',
  id: '',
  avatar: '',
  mobile: '',
  account: '',
  likeNumber: 0,
  collectionNumber: 0,
  score: 0,
  couponNumber: 0,
  consultationInfo: [
    {
      id: '',
      name: '',
      avatar: '',
      depName: '',
      positionalTitles: '',
      hospitalName: '',
      gradeName: '',
      orderId: '',
    },
  ],
  orderInfo: {
    paidNumber: 0,
    receivedNumber: 0,
    shippedNumber: 0,
    finishedNumber: 0,
  },
})
async function getData() {
  const res = await getMine()
  // 检查接口是否成功返回
  if (res.code === 10000) {
    mineData.value = res.data
    console.log(res.data)
  }
  else {
    console.log('接口返回非成功状态:', res.code, res.msg)
  }
}
onLoad(() => {
  getData()
})

function confirm() {
  message
    .confirm({
      msg: '确定要退出当前登录吗',
      title: '退出登录',
    })
    .then(() => {
      uni.removeStorageSync('token')
      uni.removeStorageSync('key')
      uni.navigateTo({ url: '/pages/login/login' })
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}
</script>

<template>
  <view class="h-100% w-100% bg-[#f4f6f8] pb-50rpx">
    <!-- 用户信息 -->
    <view class="box1 w-100% flex flex-col">
      <view class="mt-60rpx flex items-center">
        <image class="m-25rpx h-150rpx w-150rpx border-rd-[50%]" :src="mineData.avatar" />
        <view class="text-40rpx font-medium">
          {{ mineData.account }}
          <view class="text-#16C2A3">
            <wd-icon name="edit-1" size="26rpx" />
          </view>
        </view>
      </view>

      <view class="mb-40rpx w-100% flex justify-around">
        <view class="flex flex-col text-center">
          <text class="text-48rpx font-bold">{{ mineData.collectionNumber }}</text>
          <text class="text-24rpx text-#979797">收藏</text>
        </view>
        <view class="flex flex-col text-center">
          <text class="text-48rpx font-bold">{{ mineData.likeNumber }}</text>
          <text class="text-24rpx text-#979797">关注</text>
        </view>
        <view class="flex flex-col text-center">
          <text class="text-48rpx font-bold">{{ mineData.score }}</text>
          <text class="text-24rpx text-#979797">积分</text>
        </view>
        <view class="flex flex-col text-center">
          <text class="text-48rpx font-bold">{{ mineData.couponNumber }}</text>
          <text class="text-24rpx text-#979797">优惠劵</text>
        </view>
      </view>
    </view>
    <!-- 问诊中 -->
    <view v-for="item in mineData.consultationInfo" :key="item.id" class="m-auto mb-20rpx h-270rpx w-690rpx border-rd-20rpx bg-[#fff] p-30rpx shadow-[0px_0px_22px_0px_#E5E5E5]">
      <view class="mb-40rpx text-32rpx font-medium">
        问诊中
      </view>
      <view class="item-center w-100% flex">
        <image class="mr-20rpx h-100rpx w-100rpx" :src="item.avatar" />
        <view class="">
          <view class="text-24rpx text-#6F6F6F">
            <text class="text-36rpx text-black font-medium">
              {{ item.name }}
            </text>
            {{ item.depName }}|{{ item.positionalTitles }}
          </view>
          <view class="text-24rpx text-#3C3E42">
            <text class="bg-#6a81ff text-18rpx text-white">
              {{ item.gradeName }}
            </text>
            {{ item.hospitalName }}
          </view>
        </view>
        <wd-button type="success" size="small" plain>
          进入咨询
        </wd-button>
      </view>
    </view>
    <!-- 药品订单 -->
    <view class="m-auto mb-20rpx h-250rpx w-690rpx border-rd-20rpx bg-[#fff] p-30rpx shadow-[0px_0px_22px_0px_#E5E5E5]">
      <view class="mb-30rpx flex items-center justify-between text-32rpx font-medium">
        药品订单
        <view class="flex items-center text-26rpx text-#C3C3C5">
          全部订单
          <wd-icon name="chevron-right" size="30rpx" />
        </view>
      </view>
      <view class="w-100% flex items-center justify-around">
        <view class="flex flex-col items-center text-24rpx text-#3C3E42">
          <img src="@/static/images/icon_1.png" alt="" class="m-10rpx h-55rpx w-55rpx">
          待付款
        </view>
        <view class="flex flex-col items-center text-24rpx text-#3C3E42">
          <img src="@/static/images/icon_2.png" alt="" class="m-10rpx h-55rpx w-55rpx">
          代发货
        </view>
        <view class="flex flex-col items-center text-24rpx text-#3C3E42">
          <img src="@/static/images/icon_3.png" alt="" class="m-10rpx h-55rpx w-55rpx">
          待收货
        </view>
        <view class="flex flex-col items-center text-24rpx text-#3C3E42">
          <img src="@/static/images/icon_4.png" alt="" class="m-10rpx h-55rpx w-55rpx">
          已完成
        </view>
      </view>
    </view>
    <!-- 快捷工具 -->
    <view class="m-auto mb-20rpx h-750rpx w-690rpx border-rd-20rpx bg-[#fff] p-30rpx shadow-[0px_0px_22px_0px_#E5E5E5]">
      <view class="text-32rpx font-medium">
        快捷工具
      </view>
      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-01.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          我的问诊
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-02.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          我的处方
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-03.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          家庭档案
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-04.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          地址管理
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-05.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          我的评价
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-06.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          官方客服
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>

      <view class="h-90rpx w-100% flex items-center justify-between">
        <view class="flex items-center text-28rpx text-#3C3E42">
          <img src="@/static/images/tool-07.svg" alt="" class="mr-30rpx h-35rpx w-35rpx">
          设置
        </view>
        <wd-icon name="chevron-right" size="22px" class="text-#C3C3C5" />
      </view>
    </view>
    <!-- 退出登录 -->
    <!-- <wd-message-box /> -->
    <view class="m-auto w-690rpx border-rd-20rpx bg-[#fff] p-20rpx text-center text-#3C3E42 shadow-[0px_0px_22px_0px_#E5E5E5]" @click="confirm">
      退出登录
    </view>
  </view>
</template>

<style lang="scss" scoped>
.box1 {
  background: linear-gradient(180deg, #adddd7 0%, #f4f6f8 100%);
}
</style>
